<template>
	<view>
		<view style="height: 50rpx;"></view>
		<view>
			<u-icon 
			@click="toBack()"
			name="arrow-left" style="font-size: 40rpx;color: gray;"></u-icon>
			<u-icon name="star" style="position: absolute;font-size: 45rpx;right: 260rpx;color: #DD524D;"></u-icon>
			<u-icon name="zhuanfa" style="position: absolute;font-size: 45rpx;right: 200rpx;"></u-icon>
		</view>
		<view style="height: 40rpx;"></view>
		<view 
			style="
				box-shadow: 0 20rpx 20rpx rgba(118,118,118,.2);">
			<image
				src="../../../static/1.jpg"
				mode="aspectFill"  
				:style="
					'overflow-y:auto;'+
					'margin-left: 50%;'+
					'transform: translateX(-50%);'+
					'width: '+imageWidth+'rpx;'+
					'height: 370rpx;'+
					'border-radius: 20rpx;'
					">
			</image>
			<view>
				<view  style="transform: translateX(-50%);margin-left: 50%;width: 90%;padding: 30rpx;position: relative;border-bottom: 3rpx solid rgba(118,118,118,.3);">
					
				<view style="font-weight: bold;">天籁KTV</view>
				<view style="height: 10rpx;"></view>
				<view style="font-size: 26rpx;">
					<u-rate style="margin-right: 20rpx;" v-model="value" :colors="colors" :icons="icons" inactive-icon="thumb-up"></u-rate>
					￥100/人</view>
				<view style="height: 10rpx;"></view>
				<view style="font-size: 24rpx;">总体：4.5 环境：4.5 服务：4.1</view>
				<view 
					style="
						position: absolute;
						bottom: 30rpx;
						right: 20rpx;
						display: inline-block;
						font-size: 25rpx;">休闲玩乐<u-icon name="arrow-right"></u-icon></view>
				<view style="
					position: absolute;
					right: 20rpx;
					font-size: 24rpx;
					color: gray;
					bottom: 80rpx;">
					<u-icon style="color: #2D5EDF;" name="map-fill"></u-icon>
					京东大道</view>
				</view>
				<view style="position: relative;padding: 30rpx 30rpx 30rpx 30rpx;">
					<view style="font-size: 28rpx;">
						高新七路恒大商业广场 4 楼
					</view>
					<view style="font-size: 25rpx;color: gray;">驾车2.0km，需约5分钟</view>
					<view style="right: 30rpx;position: absolute;display: inline-block;text-align: center;bottom: 30rpx;">
						<u-icon name="phone-fill" style="color: #F45E33;"></u-icon>
						<view style="font-size: 25rpx;color: gray;">电话</view>
					</view>
				</view>
			</view>
		</view>
		<view style="height: 30rpx;"></view>
		<view style="background-color: #FFFFFF;padding: 20rpx;box-shadow: 0 0 10rpx rgba(118,118,118,.4);">
			<u-button type="primary" size="mini"  shape="square" style="position: absolute;right: 20rpx;">去购物</u-button>
			<view style="font-size: 30rpx;font-weight: bold;">推荐商品</view>
			<view style="height: 15rpx;"></view>
			<view style="font-size: 25rpx;color: gray;">超市推荐购买（6）</view>
			<view style="height: 25rpx;"></view>
			<view>
				<image 
					src="../../../static/1.jpg" 
					style="width: 340rpx;height: 200rpx;border-radius: 10rpx;" 
					mode="aspectFill"></image>
				<image 
					src="../../../static/1.jpg" 
					style="position: absolute;right: 20rpx;width: 340rpx;height: 200rpx;border-radius: 10rpx;" 
					mode="aspectFill"></image>
			</view>
		</view>
		<view style="height: 25rpx;"></view>
		<view style="padding: 20rpx;box-shadow: 0 0 10rpx rgba(118,118,118,.5);background-color: #FFFFFF;">
			<view style="font-weight: bold;">评论（{{pinglunNumber}}）</view>
		</view>
	</view>
</template>

<script>
	export default {
		data() {
			return {
				pinglunNumber:0,
				imageWidth:680,
				value: 2,
				colors: ['rgba(255,0,0,.5)', 'rgba(255,0,0,.7)', 'rgba(255,0,0,.9)'],
				icons: ['thumb-down-fill', 'thumb-down-fill', 'thumb-up-fill', 'thumb-up-fill'],
				
			}
		},
		mounted() {
			var iwhB=false;
			// this.imageWidth=680;
			// var iwhInter=setInterval(()=>{
			// 	if(this.imageWidth<1080&&(!iwhB)){
			// 		this.imageWidth+=3;
			// 	}
				
			// 	if(this.imageWidth>=1080){
			// 		iwhB=true
			// 	}
			// 	if(iwhB){
			// 		this.imageWidth-=3;
			// 		if(this.imageWidth<=680){
			// 			clearInterval(iwhInter);
			// 		}
			// 	}
			// },1);
			
			// var ii=parseInt(6000/500);
			// var pinglunNumberInter=setInterval(()=>{
			// 	if(this.pinglunNumber<=6000){
			// 		this.pinglunNumber+=ii;
			// 	}else{
			// 		this.pinglunNumber=6000;
			// 		clearInterval(pinglunNumberInter);
			// 	}
			// },1);
		},
		methods: {
			toBack(){
				uni.navigateBack({
					delta:1
				})
			}
		}
	}
</script>

<style lang="scss">
.grid-selected {
	color:#FF6634;
	font-weight: bold;
	.grid-text{
		color:#FF6634;
	}
}

.grid-text{
	color:rgba(0,0,0,.6);
}

</style>
